<style>
   * {padding:0;margin:0}
html,body {
    height: 100%;
    background-color: black;
}
</style>
<body>
    <div class="xuetiao" style="width:100px;height:50px;background:#fff">
        <div class="xue" style="width:100px;height:50px;background:red"></div>
    </div>
</body>
<script>
    function random(min,max){
        return Math.floor(Math.random()*(max-min+1)+min)
    }
    setInterval(function(){
        var imgObj =document.createElement('img')
        imgObj.src ='./img/star.gif'

        var w = random(70,80)
        imgObj.width =w
        imgObj.height =w
        imgObj.style.position='absolute'
        var maxW = (window.innerWidth||document.documentElement.clientWidth)-w
        var maxH=(window.innerHeight||document.documentElement.clientHeight)-w
        var L=random(0,maxW)
        var T =random(0,maxH)
        imgObj.style.left=L+'px'
        imgObj.style.top=T+'px'
        document.body.appendChild(imgObj)
    },1000)

document.onclick = function(evt){
    var e = evt || window.event
    var target =e.target || e.srcElement
    if(target.nodeName === 'IMG'){
        document.body.removeChild(target)
        
        var xue =parseInt(document.querySelector('.xue').style.width)
        if(xue+1 !==100){
            document.querySelector('.xue').style.width=xue+1+'px'
        }
    }
}
setInterval(function() {
    // ### 血-1
    var xue = parseInt(document.querySelector('.xue').style.width)
    document.querySelector('.xue').style.width = xue-1 + 'px'
}, 1000)
</script> 